<template>
<div>
  <Form label-position="left" :label-width="58" :label-height="58" style="margin-top: 20px;">
    <Form-item :label="label" class="clearfix">
      <div class="" style="text-align: left;vertical-align: middle;">
      <div class="demo-upload-list" v-show="item.id" v-for="(item,key,index) in defaultList">
        <img :src="baseURL+item.url">
        <div class="demo-upload-list-cover" style="text-align: center;">
          <Icon type="ios-eye-outline" size="30" @click.native="handleView(baseURL+item.url)"></Icon>
          <!-- <Icon type="ios-trash-outline" @click.native="handleRemove(item,key,index)"></Icon> -->
        </div>
      </div>
      <div class="demo-upload-list" v-for="item in uploadList">
        <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item,key,index)"></Icon>
            </div>
        </template>
        <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
      </div>
      <div>
        <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :format="['jpg','jpeg','png','pdf']" :max-size="10240" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" type="drag" :action="action"
          :headers="headers" :data="data" style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
          </div>
        </Upload>
      </div>
      </div>
    </Form-item>
  </Form>
</div>
</template>
<script>
import store from '../js/vuex-store'
//import { removeKeyUpload } from '../../api/userschedule';
export default {
  data() {
    return {
      defaultList: [],
      imgName: '',
      baseURL: baseURL,
      visible: false,
      data: {
        class: this.class12,
        class3:this.class3,
      },
      action: baseURL + 'bodyreport',
      uploadList: [],
      headers: {
        Authorization: 'Bearer ' + store.getters.getUserToken,
        codetoken:store.getters.getAuth
      },
    }
  },
  props: {
    showdata: {
      default () {
        return [];
      }
    },
    value: {
      default () {
        return '';
      }
    },
    class12: {
      default () {
        return '';
      }
    },
    class3:{
      default () {
        return '';
      }
    },
    label:{
      default () {
        return '';
      }
    }
  },
  watch: {
    showdata: {
      handler(fileList) {
        this.defaultList = fileList;
      },
    },
  },
  methods: {
    handleView(url) {
      location.href = url;
      var image = new Image();
      image.src = url;
      const width = image.width;
      this.$Modal.info({
        width: width,
        okText: "关闭",
        render: (h) => {
          return h('img', {
            on: {
              input: (val) => {
                this.value = val;
              }
            },
            attrs: {
              src: url,
              width: "100%"
            },
          })
        }
      });
    },
    handleRemove(file, key, index) {
      this.$Modal.confirm({
        title: '警告',
        content: '是否删除该记录？',
        onOk: () => {
          setTimeout(() => {
            // 设置id为空，不显示该对象
            removeKeyUpload(file.id).then(response => {
              if (response.data.code == 0) {
                file.id = '';
                this.$Message.success('删除成功');
              } else {
                this.$Message.error('删除失败');
              }
            });
          })
        },
        cancelText: '取消',
      });
    },
    handleSuccess(res, file) {
      let obj = new Object();
      obj = {
        id: res.id,
        type: res.type,
        url: res.url
      };
      this.defaultList[this.defaultList.length] = obj;
      this.uploadList = [];
      this.$Message.success('上传成功');
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 10M。'
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 20;
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 20 张图片。'
        });
      }
      return check;
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  }
}
</script>
<style>
.demo-upload-list {
  display: inline-block;
  width: 58px;
  height: 58px;
  /*text-align: left;*/
  line-height: 58px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 2px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.upload-body {
  text-align: left;
}
</style>
